<template>
  <div class="indicator" @click="freeze = false">
    <el-button @click="rotate(90)">顺时针旋转90°</el-button>
    <el-button @click="rotate(-90)">逆时针旋转90°</el-button>
    <el-button @click="rotate(1)">顺时针旋转1°</el-button>
    <el-button @click="rotate(-1)">逆时针旋转1°</el-button>
    <el-button @click="zoomToFit">自适应大小</el-button>
    <el-icon @click="scale(0.1)">
      <svg
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        data-v-ea893728=""
      >
        <path
          fill="currentColor"
          d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"
        ></path>
      </svg>
    </el-icon>
    <el-icon @click="scale(-0.1)">
      <svg
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        data-v-ea893728=""
      >
        <path
          fill="currentColor"
          d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zM352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64z"
        ></path>
      </svg>
    </el-icon>
    <el-icon @click="reset()">
      <svg
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        data-v-ea893728=""
      >
        <path
          fill="currentColor"
          d="M771.776 794.88A384 384 0 0 1 128 512h64a320 320 0 0 0 555.712 216.448H654.72a32 32 0 1 1 0-64h149.056a32 32 0 0 1 32 32v148.928a32 32 0 1 1-64 0v-50.56zM276.288 295.616h92.992a32 32 0 0 1 0 64H220.16a32 32 0 0 1-32-32V178.56a32 32 0 0 1 64 0v50.56A384 384 0 0 1 896.128 512h-64a320 320 0 0 0-555.776-216.384z"
        ></path>
      </svg>
    </el-icon>
    <el-button @click.stop="draw">框选</el-button>
    <el-button @click="submit">提交</el-button>
  </div>
  <div class="pre-container" ref="preContainer">
    <!-- 拖拽画布 -->
    <div id="container" ref="container"></div>
    <!-- 截图画布 -->
    <screenShot
      v-if="freeze"
      class="frame"
      :frameRect="frameRect"
      :imgDom="imgDom"
      @done="done"
    />
  </div>
  <img :src="dataUrl" />
</template>

<script lang="ts" setup>
import { Graph } from '@antv/x6'
import { onMounted, ref, reactive } from 'vue'
import screenShot from './components/screenShot.vue'
defineOptions({
  name: 'prev-img2',
})
const dataUrl = ref('')
const preContainer = ref()
const container = ref()
const freeze = ref(false)
const imageUrl = ref(
  'https://oss.xinjiaoyu.com/exam/test/182769/10237/20230413_64aacbb1995a4d91b8a1ef8342518af5_36/20230413_64aacbb1995a4d91b8a1ef8342518af5_36_001_page.jpg',
)
const imgDom = ref()
let imageInstance: any
let graphInstance: Graph

const frameRect = reactive({
  x: 0,
  y: 0,
  width: 0,
  height: 0,
  zoom: 1,
  angle: 0,
})

onMounted(() => {
  // 初始化画布
  const { width, height } = preContainer.value.getBoundingClientRect()
  graphInstance = new Graph({
    container: container.value,
    grid: false,
    width,
    height,
    autoResize: true,
  })
  const img = new Image()
  img.src = imageUrl.value
  img.crossOrigin = 'anonymous'
  img.onload = () => {
    imageInstance = graphInstance.addNode({
      shape: 'image',
      x: 0,
      y: 0,
      width: img.naturalWidth,
      height: img.naturalHeight,
      imageUrl: imageUrl.value,
    })
    graphInstance.zoomToFit(imageInstance)
  }
  imgDom.value = img
})

const rotate = (angle: number) => {
  imageInstance.rotate(angle)
}
const scale = (scale: number) => {
  graphInstance.zoomTo(graphInstance.zoom() + scale)
}
const zoomToFit = () => {
  graphInstance.zoomToFit(imageInstance)
}
const draw = () => {
  // 添加canvas遮罩
  const { angle, zoom, width, height, x, y } = getImgStyle()
  console.log('imgStyle', { angle, zoom, width, height, x, y })
  frameRect.angle = angle
  frameRect.zoom = zoom
  frameRect.width = width
  frameRect.height = height
  frameRect.x = x
  frameRect.y = y
  freeze.value = true
}
const reset = () => {
  imageInstance.setProp('angle', 0)
  imageInstance.position(0, 0)
  graphInstance.zoomToFit(imageInstance)
}

const submit = () => {
  console.log({
    zoom: graphInstance.zoom(),
    rotate: graphInstance.rotate(),
    angle: imageInstance.getProp('angle'),
    size: {
      width: imageInstance.getProp('size').width,
      height: imageInstance.getProp('size').height,
    },
  })
  console.log(graphInstance.getCells().map((cell: any) => cell.toJSON()))
}

function done(data: any) {
  dataUrl.value = data.dataUrl
  // freeze.value = false
  console.log(data.rect)
  renderRect(data.rect)
}

// 画矩形框
function renderRect(rect: {
  x: number
  y: number
  width: number
  height: number
}) {
  graphInstance.addNode({
    shape: 'rect',
    x: rect.x / frameRect.zoom,
    y: rect.y / frameRect.zoom,
    width: rect.width / frameRect.zoom,
    height: rect.height / frameRect.zoom,
  })
}

// 获取图片的样式
function getImgStyle() {
  const zoom = graphInstance.zoom()
  const imgJson = graphInstance.getCells()[0].toJSON()
  return {
    id: imgJson.id,
    width: imgJson.size.width,
    height: imgJson.size.height,
    x: imgJson.position.x,
    y: imgJson.position.y,
    angle: imgJson.angle || 0,
    zoom,
  }
}
</script>

<style lang="scss" scoped>
.indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: #fff;
  .el-icon {
    cursor: pointer;
    font-size: 30px;
    padding: 10px;
    box-sizing: content-box;
  }
}

.pre-container {
  width: 100%;
  height: calc(100vh - 100px - 50px);
  background-color: aquamarine;
  position: relative;
  overflow: hidden;
  .frame {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba($color: #000000, $alpha: 0.1);
    transform-origin: 50% 50%;
    transform: scale(1) rotate(0deg);
  }
}
</style>
